<template>
	<view>
		<!--  top-search -->
		<!--  :style="`top: ${windowTop}px;`" -->
		<!-- <view style="height: 110upx;"></view> -->
		<view class="" style="height: 100%;">
			<z-paging ref="paging" v-model="listData" @query="queryList" :auto-show-system-loading="true" :loading-more-custom-style="{
				paddingBottom: '200rpx',
				paddingTop: '50rpx'
			}">
				<view slot="top">
					<view class="cu-bar search padding-tb-sm bg-white">
						<view class="search-form round padding-lr" style="background-color: #f2f2f2;height: 40px;">
							<input style="height: 40px;" @confirm="searchConfirm" :adjust-position="false" type="text" placeholder="请输入建筑物名称或地址" confirm-type="search"></input>
							<uni-icons class="margin-left-xs" type="search" size="19"></uni-icons>
						</view>
					</view>
				</view>
				<block v-for="(value, index) in listData" :key="index">
					<view class="padding bg-white margin-tb" style="color: #2E475E;" @click="goDetail(value.id)">
						<view class="flex response">
							<view class="padding-right">
								<view class="building">
									<uni-icons type="shop" size="30" color="#2667FF"></uni-icons>
								</view>
							</view>
							<view class="flex-treble">
								<view class="flex justify-between">
									<view class="">
										<view class="text-lg">{{value.buildingName}}</view>
										<view class="text-lg margin-top-xs">{{parseTime(value.createTime)}}</view>
									</view>
									<view class="rotate" @click.stop="toggle(value.id)">
										<uni-icons type="more-filled" size="21" color="#515151"></uni-icons>
									</view>
								</view>
								<view class="flex justify-between margin-top">
									<view class="flex flex-twice">
										<uni-icons type="staff" size="21" color="#515151"></uni-icons>
										<view class="margin-left-xs">组织单位</view>
									</view>
									<view class="flex-treble text-right">
										{{value.deptName}}
									</view>
								</view>
								<view class="flex justify-between margin-top-sm">
									<view class="flex flex-twice">
										<uni-icons type="location" size="21" color="#515151"></uni-icons>
										<view class="margin-left-xs">详细地址</view>
									</view>
									<view class="flex-treble text-right">
										{{value.address}}
									</view>
								</view>
								<view class="flex justify-between margin-top-sm">
									<view class="flex flex-twice">
										<uni-icons type="cloud-upload" size="21" color="#515151"></uni-icons>
										<view class="margin-left-xs">设备数量</view>
									</view>
									<view class="flex-treble text-right">
										{{value.deviceNum || 0}}台
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-end padding-lr padding-top solid-top margin-top">
							<view>
								<button type="primary" size="mini" @click.stop="responderSettingsHandle(value.id)">接警人设置</button>
							</view>
							<view class="margin-left">
								<button type="primary" size="mini" @click.stop="deviceListHandle(value.id)">设备列表</button>
							</view>
						</view>
					</view>
				</block>
			</z-paging>
		</view>
		<view style="height: 142upx;"></view>
		<view class="padding bg-white fixed-bottom" v-if="$auth.hasPermi('thing:building:create')">
			<button type="primary" @click="goDetail()">新增建筑物</button>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="bg-white padding-top bottom-popup">
					<view v-if="$auth.hasPermi('thing:building:update')" class="padding text-center text-lg solid-bottom text-black" @click="editBuildingHandle">修改建筑物</view>
					<view v-if="$auth.hasPermi('thing:building:delete')" class="padding text-center text-lg text-red" @click="deleteBuildingHandle">删除建筑物</view>
					<view class="padding-xs" style="background-color: #F8F8F8;"></view>
					<view class="padding text-center text-lg" @click="toggleClose">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { getBuildingPage, deleteBuilding } from "@/api/building/index"
	import { parseTime } from "@/utils/ruoyi"
	import { showDeleteConfirm } from '@/utils/common'
	export default {
		data() {
			return {
				listData: [],
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pageNo: 1,
				pageSize: 10,
				searchValue: '',
				currentOperationID: '',
				windowTop: 0,
			};
		},
		onLoad() {
			// this.getList();
			var that = this
			uni.getSystemInfo({
				success: function (res) {
					// 标题栏高度
					that.windowTop = res.windowTop
				}
			});
			uni.$on('buildingListReload', (e)=>{
				if(e) {
					this.$refs.paging.reload()
				}
			})
		},
		methods: {
			searchConfirm(e) {
				this.searchValue = e.target.value
				this.$refs.paging.reload()
			},
			parseTime(time) {
				return parseTime(time)
			},
			toggle(id) {
				this.$refs.popup.open('bottom')
				this.currentOperationID = id
			},
			toggleClose() {
				this.$refs.popup.close()
			},
			queryList(query){
				getBuildingPage({
					pageNo: query,
					pageSize: this.pageSize,
					buildingName: this.searchValue
				}).then(response => {
				  this.$refs.paging.complete(response.data.list);
				})
			},
			goDetail: function(e) {
				this.$tab.navigateTo(e ? '/pages/mine/building/CreateOrEditBuilding?id=' + e : '/pages/mine/building/CreateOrEditBuilding')
			},
			editBuildingHandle: function() {
				this.$refs.popup.close()
				this.$tab.navigateTo(this.currentOperationID ? '/pages/mine/building/CreateOrEditBuilding?id=' + this.currentOperationID : '/pages/mine/building/CreateOrEditBuilding')
			},
			deleteBuildingHandle() {
				this.$refs.popup.close()
				showDeleteConfirm().then(res => {
					if (res.confirm) {
						deleteBuilding(this.currentOperationID).then(res => {
							this.$modal.msgSuccess("删除成功")
							this.$refs.paging.reload()
						})
					}
				})
			},
			responderSettingsHandle(e) {
				this.$tab.navigateTo('/pages/mine/building/ResponderSettings?id=' + e)
			},
			deviceListHandle(e) {
				this.$tab.navigateTo('/pages/mine/building/DeviceList?buildingId=' + e)
			}
		}
	};
</script>

<style lang="scss">
	.top-search {
		width: 100%;
		background-color: #F1F1F1;
		z-index:99;
		position: fixed;
	}
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.rotate {
	   transform: rotate(-90deg);
	}
	.building {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100upx;
		height: 100upx;
		border: 1px solid #2667FF;
		border-radius: 50upx;
	}
	.bottom-popup {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
</style>
